
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
            供应商商品
          </div>

          <div class="hei10"></div>

        <div class="protitle">供应商提供商品</div>
        <div class="row" style="padding: 20px 0;">
          <el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="供应商">
              <el-input v-model="form.parent_name"></el-input>
            </el-form-item>
            <el-button type="danger" size="mini" @click="search">搜索</el-button>

            <el-checkbox v-model="checked2" style="margin-left: 30px; height: 42px; line-height: 42px;" @change='chooseparid2'>仅显示供应商主推商品</el-checkbox>
          </el-form>
        </div>


        <div class="con" v-loading="loading">

          <el-table :data="list" border style="font-size: 14px;" align="center">
            <el-table-column label="商品信息" width="400">
              <template slot-scope="scope" style="position: relative;">
                <div style="position: absolute; right: 10px; top: 10px; display: flex;">
                  <div v-if="scope.row.is_main == 1" style="background: #EEF7FF; color: #fff; font-size:12px; padding: 0px 10px; border-radius:3px; margin-right: 10px;">主推</div>
                </div>
                <div style="display: flex; padding-top:25px;">
                  <div style="cursor: pointer;height: 80px; width: 80px; margin-right: 10px; overflow: hidden;: hidden;" v-if="scope.row.image1 == ''"><img src="../../../static/img/kenan.jpg"
                      style="width: 80px; "></div>
                  <div style="cursor: pointer;height: 80px; width: 80px; margin-right: 10px; overflow: hidden;: hidden;" v-if="scope.row.image1 != ''"><img :src="scope.row.image1"
                      style="width: 80px; "></div>
                      <!-- <div style="cursor: pointer;height: 80px; width: 80px; margin-right: 10px; overflow: hidden;: hidden;" @click="tiaozhuan(scope.row.id,scope.row.order_pages_id,scope.row.product_id)" v-if="scope.row.image1 == ''"><img src="../../../static/img/kenan.jpg"
                          style="width: 80px; "></div>
                      <div style="cursor: pointer;height: 80px; width: 80px; margin-right: 10px; overflow: hidden;: hidden;" @click="tiaozhuan(scope.row.id,scope.row.order_pages_id,scope.row.product_id)" v-if="scope.row.image1 != ''"><img :src="scope.row.image1"
                          style="width: 80px; "></div> -->
                  <div style="width:285px">
                    <div style="color: #197CFF; font-size: 14px; margin-bottom: 5px;">{{scope.row.title}}</div>
                    <div style="font-size: 14px; margin-bottom: 5px; font-weight: bold; display: flex; flex-wrap: wrap;" v-if="scope.row.selling_point != ''">

                      <div v-for="item in scope.row.selling_point" :key="item" class="yansebutong">
                        <el-tooltip class="item" effect="dark" :content="item" placement="top-start"  v-if="item.length > 11">
                          <div class="slh">{{item}}</div>
                        </el-tooltip>
                        <div  class="slh" v-if="item.length <= 11">{{item}}</div>
                      </div>
                    </div>
                    <div style="font-size: 14px;">结算要求：{{scope.row.commission_rule}}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="func_A02" label="佣金额度" width="300">
              <template slot-scope="scope">

                <div v-if="scope.row.page_id != null && func_A02">

                  <div>
                     <div>

                      <div>{{scope.row.rules}}</div>
                      <span v-if="scope.row.active_commission != 0">已激活，佣金{{scope.row.active_commission}}元.</span>
                      <span
                        v-if="scope.row.first_recharge_one_commission != 0">首充大于{{scope.row.first_recharge_one}}元，佣金{{scope.row.first_recharge_one_commission}}元</span>
                      <span
                        v-if="scope.row.first_recharge_two_commission != 0">或者首充大于{{scope.row.first_recharge_two}}元，佣金{{scope.row.first_recharge_two_commission}}元.</span>
                      <span
                        v-if="scope.row.recharge_amount_one_commission != 0">累计充值大于{{scope.row.recharge_amount_one}}元，佣金{{scope.row.recharge_amount_one_commission}}元</span>
                      <span
                        v-if="scope.row.recharge_amount_two_commission != 0">且累计充值大于{{scope.row.recharge_amount_two}}元，佣金{{scope.row.recharge_amount_two_commission}}元.</span>                      </div>
                  </div>

                  <!-- <el-tooltip effect="dark" popper-class="tooltip" placement="top">

                			<div slot="content">
                				<div>{{scope.row.rules}}</div>
                				<span v-if="scope.row.active_commission != 0">已激活，佣金{{scope.row.active_commission}}元.</span>
                				<span
                					v-if="scope.row.first_recharge_one_commission != 0">首充大于{{scope.row.first_recharge_one}}元，佣金{{scope.row.first_recharge_one_commission}}元</span>
                				<span
                					v-if="scope.row.first_recharge_two_commission != 0">或者首充大于{{scope.row.first_recharge_two}}元，佣金{{scope.row.first_recharge_two_commission}}元.</span>
                				<span
                					v-if="scope.row.recharge_amount_one_commission != 0">累计充值大于{{scope.row.recharge_amount_one}}元，佣金{{scope.row.recharge_amount_one_commission}}元</span>
                				<span
                					v-if="scope.row.recharge_amount_two_commission != 0">且累计充值大于{{scope.row.recharge_amount_two}}元，佣金{{scope.row.recharge_amount_two_commission}}元.</span>
                			</div>
                			<div>
                				<div>{{scope.row.rules}}</div>
                				<span v-if="scope.row.active_commission != 0">已激活，佣金{{scope.row.active_commission}}元.</span>
                				<span
                					v-if="scope.row.first_recharge_one_commission != 0">首充大于{{scope.row.first_recharge_one}}元，佣金{{scope.row.first_recharge_one_commission}}元</span>
                				<span
                					v-if="scope.row.first_recharge_two_commission != 0">或者首充大于{{scope.row.first_recharge_two}}元，佣金{{scope.row.first_recharge_two_commission}}元.</span>
                				<span
                					v-if="scope.row.recharge_amount_one_commission != 0">累计充值大于{{scope.row.recharge_amount_one}}元，佣金{{scope.row.recharge_amount_one_commission}}元</span>
                				<span
                					v-if="scope.row.recharge_amount_two_commission != 0">且累计充值大于{{scope.row.recharge_amount_two}}元，佣金{{scope.row.recharge_amount_two_commission}}元.</span>
                			</div>
                		</el-tooltip> -->

                </div>
                <div v-if="scope.row.page_id == null && func_A02">
                  {{scope.row.commission}}元
                </div>


              </template>
            </el-table-column>
            <el-table-column v-if="func_A02" prop="tika_cost" label="提卡费(元)">
            </el-table-column>
            <el-table-column prop='parent_name' label="供应商"> </el-table-column>
            <el-table-column prop='created_at' label="创建时间"> </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.added == null" size="mini" plain
                  @click="shangjia(scope.row.id)">加入到销售中心</el-button>
                <span v-if="scope.row.added != null">已加入到销售中心</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="list" style="padding-bottom: 0; padding-top: 0;">
						<div class="th1">产品标题</div>
						<div class="th2">
							<span v-if="func_A02">佣金额度</span>
						</div>
						<div class="th3">
							<span v-if="func_A02">提卡费</span>
						</div>
						<div class="th4">供应商</div>
						<div class="th5">创建时间</div>
						<div class="th6">操作</div>
					</div>

					<div class="list" v-for="item in list" :key="item.id">
						<div class="td1" v-if="item.image1 == ''"><img src="../../../static/img/kenan.jpg"></div>
						<div class="td1" v-if="item.image1 != ''"><img :src="item.image1"></div>
						<div class="td2">
							<div class="title">{{item.title}}</div>
							<div class="yd" v-if="item.selling_point != ''">
								<span v-for="item in item.selling_point" :key="item">{{item}}</span>
							</div>
							<div class="alt">结算要求：{{item.commission_rule}}</div>
						</div>

						<div v-if="item.page_id != null" class="td3 bor1">
							<div v-if="func_A02">
								<div v-if="item.rules != ''">{{item.rules}}</div>

								<el-tooltip effect="dark" popper-class="tooltip" placement="top">

									<div slot="content">
										<div>{{item.rules}}</div>
										<span v-if="item.active_commission != 0">已激活，佣金{{item.active_commission}}元.</span>
										<span
											v-if="item.first_recharge_one_commission != 0">首充大于{{item.first_recharge_one}}元，佣金{{item.first_recharge_one_commission}}元</span>
										<span
											v-if="item.first_recharge_two_commission != 0">或者首充大于{{item.first_recharge_two}}元，佣金{{item.first_recharge_two_commission}}元.</span>
										<span
											v-if="item.recharge_amount_one_commission != 0">累计充值大于{{item.recharge_amount_one}}元，佣金{{item.recharge_amount_one_commission}}元</span>
										<span
											v-if="item.recharge_amount_two_commission != 0">且累计充值大于{{item.recharge_amount_two}}元，佣金{{item.recharge_amount_two_commission}}元.</span>
									</div>
									<div>
										<div>{{item.rules}}</div>
										<span v-if="item.active_commission != 0">已激活，佣金{{item.active_commission}}元.</span>
										<span
											v-if="item.first_recharge_one_commission != 0">首充大于{{item.first_recharge_one}}元，佣金{{item.first_recharge_one_commission}}元</span>
										<span
											v-if="item.first_recharge_two_commission != 0">或者首充大于{{item.first_recharge_two}}元，佣金{{item.first_recharge_two_commission}}元.</span>
										<span
											v-if="item.recharge_amount_one_commission != 0">累计充值大于{{item.recharge_amount_one}}元，佣金{{item.recharge_amount_one_commission}}元</span>
										<span
											v-if="item.recharge_amount_two_commission != 0">且累计充值大于{{item.recharge_amount_two}}元，佣金{{item.recharge_amount_two_commission}}元.</span>
									</div>
								</el-tooltip>
							</div>
						</div>
						<div v-if="item.page_id == null" class="td3 bor1">
							<div v-if="func_A02">{{item.commission}}元</div>
						</div>
						<div class="td4">
							<div v-if="func_A02">{{item.tika_cost}}元</div>
						</div>
						<div class="td5">{{item.parent_name}}</div>
						<div class="td6">{{item.created_at}}</div>
						<div class="td7">

							<el-button type="primary" v-if="item.added == null" size="mini" plain
								@click="shangjia(item.id)">加入到销售中心</el-button>
							<span v-if="item.added != null">已加入到销售中心</span>

						</div>
					</div> -->

          <el-pagination background layout="total,prev, pager, next" @current-change="fanye" :page-size="pagesize"
            :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from "@/components/foot.vue"
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
    },
    name: 'productionDeliverysale',
    data() {
      return {
        msg: "hello",
        form: {
          title: "",
          parent_name: "",
          is_main:""
        },
        checked: false,
        loading: true,
        list: "",
        total: 0,
        pagesize: 20,
        page: 1,
        shopid: "",
        func_A02: false,
        checked2:false
      }
    },
    created() {
      //传进来的shopid
      if (this.$route.query.id) {
        this.shopid = this.$route.query.id
      }
      this.getpro();


      //权限问题
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for (var i in this.user_func) {
        if (this.user_func[i] != null) {
          var func_number = this.user_func[i].code
          if (func_number.indexOf("A02") >= 0) {
            this.func_A02 = true
          }
        }
      }

    },
    methods: {
      chooseparid2:function(){
        if(this.checked2){
          this.form.is_main = 1
        }else{
          this.form.is_main = ""
        }
        this.getpro();
      },
      //跳转
      tiaozhuan: function(id) {
        this.$router.push({
          path: '/productSee',
          query: {
            id: id
          }
        })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getpro()
      },
      //获取商品
      getpro: function() {
        var that = this;
        axios.get('/api/gth/supplier/products?order_by=0&title=' + this.form.title + '&parent_name=' +
            this.form.parent_name + '&shop_id=' + this.shopid + '&page=' + this.page + '&page_size=' + this.pagesize + '&is_main=' + this.form.is_main)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.total = response.data.data.total
              that.list = response.data.data.data
              that.loading = false
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //搜索
      search: function() {
        this.loading = true
        this.page = 1
        this.getpro()
      },
      //发布别人的产品到我的商品里
      shangjia: function(id) {
        this.$router.push({
          path: '/addPros',
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {


.slh{white-space: nowrap;
      	text-overflow: ellipsis;
      	overflow: hidden;
      	word-break: break-all; max-width: 140px;}
    .yansebutong {
      margin-right: 10px; line-height: 20px; color: #FFF;
      margin-bottom: 5px;padding: 0 5px;border-radius: 2px;

    }

    .yansebutong:nth-child(1) {
        border: 1px #EEF7FF solid; color: #EEF7FF;
    }

    .yansebutong:nth-child(2) {

       border: 1px #FBB03B solid; color: #FBB03B;
    }

    .yansebutong:nth-child(3) {

       border: 1px #409EFF solid; color: #409EFF;
    }

    .yansebutong:nth-child(4) {
       border: 1px peru solid; color: peru;

    }
    .yansebutong:nth-child(5) {
       border: 1px peru solid; color: peru;

    }


        .protitle {
          line-height: 55px;
          background: #EFEFEF;
          padding-left: 10px;
        }

        .el-form {
          display: flex;
          flex-basis: 900px;

          .el-form-item {
            margin-bottom: 0;
          }

          .el-button {
            margin-left: 20px;
          }
        }

        // .o_ul {
        // 	background: #F9F9F9;
        // 	display: flex;

        // 	.o_li {
        // 		flex-basis: 160px;
        // 		line-height: 45px;
        // 		display: block;
        // 		color: #727272;
        // 		border-top: 3px #F9F9F9 solid;
        // 		font-size: 14px;
        // 		text-align: center;
        // 	}

        // 	.act {
        // 		border-top: 3px #DD2727 solid;
        // 		background: #FFFFFF;
        // 	}
        // }

        // .row {
        // 	display: flex;
        // 	justify-content: space-between;
        // 	padding: 30px;

        // 	.el-form {
        // 		display: flex;
        // 		flex-basis: 900px;

        // 		.el-form-item {
        // 			margin-bottom: 0;
        // 		}

        // 		.el-button {
        // 			margin-left: 20px;
        // 		}
        // 	}

        // 	.only {
        // 		padding: 7px;
        // 	}
        // }

        // .row2 {
        // 	display: flex;
        // 	padding-left: 30px;

        // 	.el-button {
        // 		margin-right: 30px
        // 	}
        // }

        // .row3 {
        // 	background: #EEF7FF;
        // 	padding: 5px 0;
        // 	color: #FFFFFF;
        // 	line-height: 50px;
        // 	display: flex;
        // 	margin-top: 30px;
        // 	margin-bottom: 15px;
        // 	justify-content: space-between;

        // 	.dlogo {
        // 		margin-left: 0px;
        // 		background: #FFFFFF;
        // 		border-radius: 25px;
        // 		margin-right: 10px;

        // 		img {
        // 			width: 30px;
        // 			display: block;
        // 			padding: 10px;
        // 		}
        // 	}

        // 	.dtitle {
        // 		font-size: 20px;
        // 	}

        // 	.dlogo2 {
        // 		background: #FFFFFF;
        // 		color: #EEF7FF;
        // 		font-size: 20px;
        // 		cursor: pointer;
        // 		border-radius: 16px;
        // 		margin: 8px 5px;
        // 		width: 32px;
        // 		line-height: 32px;
        // 		height: 32px;
        // 		text-align: center;
        // 	}

        // 	.dcon {
        // 		font-size: 14px;
        // 	}

        // 	.dget {
        // 		line-height: 26px;
        // 		color: #EEF7FF;
        // 		font-size: 14px;
        // 		background: #FFFFFF;
        // 		height: 26px;
        // 		margin-top: 14px;
        // 		padding: 0px 20px;
        // 		border-radius: 15px;
        // 	}

        // 	.dmy {
        // 		font-size: 14px;
        // 		padding: 0 20px;
        // 	}
        // }

        // .list {
        // 	&:hover {
        // 		background: #EFEFEF
        // 	}

        // 	display: flex;
        // 	color: #727272;
        // 	border-bottom:1px #EAEAEA solid;
        // 	font-size: 14px;
        // 	padding: 15px 0;
        // 	line-height: 90px;
        // 	text-align: left;

        // 	.th1 {
        // 		flex-basis: 450px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		padding-left: 30px;
        // 		box-sizing: border-box;
        // 	}

        // 	.th2 {
        // 		flex-basis: 100px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		text-align: center;
        // 	}

        // 	.th3 {
        // 		flex-basis: 100px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		text-align: center;
        // 	}

        // 	.th4 {
        // 		flex-basis: 200px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		text-align: center;
        // 	}

        // 	.th5 {
        // 		flex-basis: 200px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		text-align: center;
        // 	}

        // 	.th6 {
        // 		flex-basis: 120px;
        // 		background: #F9F9F9;
        // 		line-height: 45px;
        // 		text-align: center;
        // 	}

        // 	.td1 {
        // 		flex-basis: 90px;
        // 		padding: 0 25px;

        // 		img {
        // 			width: 90px;
        // 			display: block;
        // 		}
        // 	}

        // 	.td2 {
        // 		flex-basis: 300px;
        // 		font-size: 14px;

        // 		.title {
        // 			height: 40px;
        // 			line-height: 20px;
        // 			font-size: 14px;
        // 			color: #197CFF;
        // 		}

        // 		.yd {
        // 			line-height: 20px;
        // 			height: 30px;

        // 			span:nth-child(1) {
        // 				color: #FF0024;
        // 				border: 1px #FF0024 solid;
        // 			}

        // 			span:nth-child(2) {
        // 				color: #FBB03B;
        // 				border: 1px #FBB03B solid;
        // 			}

        // 			span:nth-child(3) {
        // 				color: #2e317c;
        // 				border: 1px #2e317c solid;
        // 			}

        // 			span {
        // 				border: 1px #ccc solid;
        // 				margin-right: 10px;
        // 				padding: 2px 8px;
        // 				border-radius: 3px;
        // 			}
        // 		}

        // 		.alt {
        // 			line-height: 20px;
        // 			color: #808080
        // 		}
        // 	}

        // 	.td3 {
        // 		overflow: hidden;
        // 		flex-basis: 100px;
        // 		height: 90px;
        // 		line-height: 20px;
        // 		font-size: 14px;
        // 		text-align: center;
        // 		padding: 15px 5px;
        // 	}

        // 	.td4 {
        // 		flex-basis: 100px;
        // 		font-size: 14px;
        // 		text-align: center;
        // 	}

        // 	.td5 {
        // 		flex-basis: 200px;
        // 		font-size: 14px;
        // 		text-align: center;
        // 	}

        // 	.td6 {
        // 		flex-basis: 200px;
        // 		font-size: 14px;
        // 		text-align: center;
        // 	}

        // 	.td7 {
        // 		flex-basis: 120px;
        // 		font-size: 14px;
        // 		line-height: 90px;
        // 		text-align: center;

        // 		.el-button {
        // 			margin-left: 0;
        // 			margin-bottom: 5px;
        // 		}

        // 		.el-dropdown {
        // 			cursor: pointer;
        // 		}
        // 	}
        // }

        .el-pagination {
          text-align: right;
          margin: 20px 0
        }

  }
</style>
